<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>cloud-home</title>
		<meta name="description" content="" />
		<meta name="author" content="hello" />
		<!-- stylesheet import-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/table.css" />
		<style type="text/css">
		  	body{
		  		padding-top: 80px;
		  		padding-bottom:60px;
		  	}
  		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="brand">Cloud Service Center</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a href="#">Home</a></li>
	              <li><a href="about.html">About</a></li>
	              <li><a href="contact.html">Contact</a></li>
	            </ul>
	            <ul class="nav" style="float: right">
	              <li class="active"><a id="user"></a></li>
	              <li><a href="index.html">logout</a></li>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
	    <div class="container">
	    	<div class="row">
	            		<ul class="nav nav-tabs">
						  <li class="active"><a href="#task_details" data-toggle="tab">task details</a></li>
						  <li><a href="#div-report" data-toggle="tab">report</a></li>
						  <li><a href="#div-history" data-toggle="tab">history</a></li>
						</ul>
	              		<div class="tab-content">
	              			<div id="task_details" class="tab-pane active">
	              				<div class="span8 well" style="height: 400px;">
					    			<input id="query_task" type="button" class="btn btn-primary" value="Query task"/>
					    			<span class="help-inline" style="color:#999999">Query the task recently</span>
					    			<div>
					    				<table class="table">
					    					<tr>
					    						<td width="100px" style="text-align:right">No</td>
					    						<td><span id="detail_no"></span></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">Start Time</td>
					    						<td><span id="detail_st"></span></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">Due Time</td>
					    						<td><span id="detail_dt"></span></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">Driver Name</td>
					    						<td><span id="detail_dn"></span></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">Comment</td>
					    						<td><span id="detail_c"></span></td>
					    					</tr>
					    				</table>
					    			</div>
					    		</div>
	              			</div>
	              			<div id="div-report" class="tab-pane">
	              				<div class="span8 well" style="height: 400px;">
					    			<ul style="list-style: none">
					    				<li>
					    					<input id="update_status" type="text" placeholder="position now" />
					    					<input id="report" type="button" class="btn btn-primary help-inline" value="Report" />
					    					<input id="missionover" type="button" class="btn help-inline" value="Task Finished" />
					    				</li>
					    			</ul>
					    			
					    			<input id="query_status" type="button" class="btn btn-primary" value="Query task status"/>
					    			<span class="help-inline" style="color:#999999">Query the tash currently</span>
					    			<div><span id="status"></span></div>
					    		</div>
	              			</div>
	              			<div id="div-history" class="tab-pane">
	              				<div class="span8 well" style="height: 400px;">
					    			<input id="query_history" type="button" class="btn btn-primary" value="Query history task"/>
					    			<div>
					    				<table id="history_table" class="tablesorter"> 
												<thead> 
													<tr> 
														<th>No</th> 
														<th>Start Time</th> 
														<th>Due Time</th> 
														<th>End Time</th>
														<th>Driver Name</th>
														<th>Comment</th> 
													</tr> 
												  </thead> 
													<tbody> 
															
													</tbody>
												<!-- 	<tbody tabindex="0"></tbody> -->
										</table>
					    			</div>
					    		</div>
	              			</div>
	              		</div>
	            	</div>
	    </div> <!-- /container -->
	    
	    <!-- JavaScript at the bottom for fast page loading -->

		  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		  <script src="js/libs/jquery-1.7.1.min.js"></script>
		<!-- import bootstrap-->
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="js/home.js"></script>
		<script src="js/libs/jquery.dataTables.min.js"></script>
	</body>
</html>
